<script>
export default {
  name: 'Permission'
}
</script>
<script setup>
import $API from '@/api/index'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'

onMounted(() => {
  reqGetMenuAll()
})

// 保存菜单信息
const menuInfoData = ref([])
// 获取菜单信息
const reqGetMenuAll = async () => {
  const result = await $API.acl.permission.reqGetMenuAll()
  if (result?.data?.code === 200) {
    menuInfoData.value = result.data.data

    return 'ok'
  } else {
    return Promise.reject(result?.data?.message)
  }
}

// 添加&编辑 对话框
const editor = ref(false)
// 添加&编辑 对话框 表单收集
const editorForm = ref({
  name: '',
  code: '',
  level: 0,
  pid: 0
})
// 添加 对话框 表单 事件
const openAddEditor = async row => {
  editor.value = true
  Object.assign(editorForm.value, {
    level: row.level + 1,
    pid: row.id
  })
}
// 编辑 对话框 表单 事件
const openUpdateEditor = async row => {
  editor.value = true
  Object.assign(editorForm.value, row)
}
// 初始化 添加&编辑 对话框 表单 信息
const initEditor = async () => {
  editorForm.value = {
    name: '',
    code: '',
    level: 0,
    pid: 0
  }
}
// 保存 添加&编辑 对话框 表单 事件
const saveEditor = async () => {
  const result = await $API.acl.permission.reqSaveMenu(editorForm.value)
  if (result?.data?.code === 200) {
    editor.value = false
    ElMessage.success('添加成功')
    reqGetMenuAll()

    return 'ok'
  } else {
    ElMessage.success('添加失败，' + result?.data?.message)
    return Promise.reject(result?.data?.message)
  }
}

// 删除权限
const removeMenu = async row => {
  const result = await $API.acl.permission.reqDeleteMenuById(row.id)
  if (result?.data?.code === 200) {
    editor.value = false
    ElMessage.success('删除成功')
    reqGetMenuAll()

    return 'ok'
  } else {
    ElMessage.success('删除失败，' + result?.data?.message)
    return Promise.reject(result?.data?.message)
  }
}
</script>

<template>
  <div>
    <!-- 权限表格 -->
    <el-card>
      <el-table
        :data="menuInfoData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="code"
          label="权限值"
        />
        <el-table-column
          prop="updateTime"
          label="修改时间"
        />
        <el-table-column
          label="操作"
          min-width="100"
        >
          <template #="{ row }">
            <el-button
              type="primary"
              :disabled="row.level === 4"
              @click="openAddEditor(row)"
              v-has="'btn.Permission.add'"
            >
              {{ row.level === 3 ? '添加功能' : '添加菜单' }}
            </el-button>
            <el-button
              type="primary"
              :disabled="row.level === 1"
              @click="openUpdateEditor(row)"
              v-has="'btn.Permission.update'"
            >
              编辑
            </el-button>
            <el-popconfirm
              :title="`确定删除 ${row.name} 吗？`"
              width="250px"
              @confirm="removeMenu(row)"
            >
              <template #reference>
                <el-button
                  type="primary"
                  :disabled="row.level === 1"
                  v-has="'btn.Permission.remove'"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加&编辑对话框 -->
    <el-dialog
      :title="editorForm.id ? '编辑' : '添加'"
      v-model="editor"
      width="30%"
      @closed="initEditor"
    >
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input
            v-model="editorForm.name"
            placeholder="请填写名字"
          />
        </el-form-item>
        <el-form-item label="权限值">
          <el-input
            v-model="editorForm.code"
            placeholder="请填写权限值"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span>
          <el-button @click="editor = false">取消</el-button>
          <el-button
            type="primary"
            @click="saveEditor"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
// start
</style>
